<template>
  <div class="header">

    <!-- 侧栏折叠按钮 -->
    <div class="collapse-btn" @click="collapseChange">
      <el-icon v-if="collapse"><Expand /></el-icon>
      <el-icon v-else><Fold /></el-icon>
    </div>

    <!--  Logo  -->
    <div class="logo">学术星河 · AcadGalaxy</div>

    <!--  导航栏按钮  -->
    <span v-for="item in items">

      <!--   有子项   -->
      <el-dropdown v-if="item.subs" class="guideBtn" trigger="click">
        <span class="menu">
          {{ item.title }}
          <el-icon class="el-icon--right"><arrow-down /></el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item v-for="subItem in item.subs" @click="jumpTo(subItem.index)">
              {{ subItem.title }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>

      <!--   无子项   -->
      <span v-else class="guideBtn" @click="this.jumpTo(item.index)">{{ item.title }}</span>

    </span>



    <div class="header-right">
      <div class="header-user-con">
        <!-- 用户名下拉菜单 -->
        <el-dropdown class="user-name" trigger="click" @command="handleCommand">
					<span class="el-dropdown-link">
            <div>
              {{ getShowingName() }}
            </div>
						<el-icon class="el-icon--right">
							<arrow-down />
						</el-icon>
					</span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="user" v-if="isLoggedIn">个人中心</el-dropdown-item>
              <el-dropdown-item divided command="logout" v-if="isLoggedIn">{{ "退出登录" }}</el-dropdown-item>
              <el-dropdown-item command="gotologin" v-if="!isLoggedIn">{{ "登录" }}</el-dropdown-item>
              <el-dropdown-item command="register" v-if="!isLoggedIn">{{ "注册" }}</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>

  </div>
</template>

<script>
import {ArrowDown, Expand, Fold} from "@element-plus/icons-vue";
import {useStore} from 'vuex';
import { req_logout } from '/src/api'
const store = useStore();
export default {
  name: "HeaderNav",
  components: {Fold, Expand, ArrowDown},
  props: {
    collapse: {
      type: Boolean,
      default: false,
    },
    items: {
      type: Array,
      default: [],
    }
  },
  methods: {
    getShowingName() {
      if (this.$store.state.hasLogin) {
        switch (this.$store.state.user.user_type) {
          case 'admin':
            return this.$store.state.user.user_name + "（管理员）";
          case 'normal':
            return this.$store.state.user.user_name + "（普通用户）";
          case 'scholar':
            return this.$store.state.user.user_name + "（认证学者：" + this.$store.state.user.scholar_name + "）";
        }
      } else {
        return "游客";
      }
    },
    collapseChange() {
      this.$emit("collapseChange");
    },
    jumpTo(path) {
      this.$router.push(path);
    },
    handleCommand(command) {
      switch (command) {
        case "user":
          this.$router.push("/account/info");
          break;
        case "logout":
          this.userLogout();
          this.$router.push("/login");
          break;
        case "gotologin":
          this.$router.push("/login");
          break;
        case "register":
          this.$router.push("/register")
      }
    },
    async userLogout() {
      let response = await req_logout()
      let data = response.data
      if (data['errno'] === 1) {
        this.$store.commit('clearUser')
      }
      response2ElMessage(response)
    },
    console(){

    }
  },
  mounted(){
  },
  created(){
  },
  computed: {
    isLoggedIn() {
      return this.$store.state.hasLogin;
    },
  }
}
</script>

<style scoped>
.header {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 70px;
  font-size: 22px;
  color: #fff;
}
.collapse-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  float: left;
  padding: 0 21px;
  cursor: pointer;
}
.header .logo {
  float: left;
  width: 250px;
  line-height: 70px;
}

.guideBtn .menu{
  color:white;
  font-size:20px;
}

.header .guideBtn {
  width: 180px;
  line-height: 70px;
  align-items: center;
  text-align: center;
  display: inline-block;
}
.guideBtn:hover{
  color: #535353;
  cursor: pointer;
  background-color:#25354c;;
}
.header-right {
  float: right;
  padding-right: 50px;
}
.header-user-con {
  display: flex;
  height: 70px;
  align-items: center;
}
.btn-fullscreen {
  transform: rotate(45deg);
  margin-right: 5px;
  font-size: 24px;
}
.btn-bell,
.btn-fullscreen {
  position: relative;
  width: 30px;
  height: 30px;
  text-align: center;
  border-radius: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.btn-bell-badge {
  position: absolute;
  right: 4px;
  top: 0px;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: #f56c6c;
  color: #fff;
}
.btn-bell .el-icon-lx-notice {
  color: #fff;
}
.user-name {
  margin-left: 10px;
}
.user-avator {
  margin-left: 20px;
}
.el-dropdown-link {
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.el-dropdown-menu__item {
  text-align: center;
}
</style>